<!-- 参考官方文档 -->
<template>
    <view class="">
        <!-- indicator-dots：显示面板指示点 -->
        <!-- indicator-color：面板指示点默认颜色 -->
        <!-- indicator-active-color：面板指示点选中颜色 -->
        <!-- circular：衔接 -->
        <!-- autoplay：自动切换 -->
        <!-- interval：自动切换时长，单位为毫秒 -->
        <swiper class="swiper-x" indicator-dots indicator-color="rgb(255, 255, 255)"
            indicator-active-color="rgb(0, 0, 0)" circular autoplay interval="2000">
            <swiper-item class="swiper-item">元素1</swiper-item>
            <swiper-item class="swiper-item">元素2</swiper-item>
            <swiper-item class="swiper-item">元素3</swiper-item>
            <swiper-item class="swiper-item">元素4</swiper-item>
        </swiper>
        <!-- vertical：纵向滑动 -->
        <swiper class="swiper-y" indicator-dots indicator-color="rgb(255, 255, 255)"
            indicator-active-color="rgb(0, 0, 0)" circular autoplay interval="2000" vertical>
            <swiper-item class="swiper-item">元素1</swiper-item>
            <swiper-item class="swiper-item">元素2</swiper-item>
            <swiper-item class="swiper-item">元素3</swiper-item>
            <swiper-item class="swiper-item">元素4</swiper-item>
        </swiper>
    </view>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
    .swiper-x {
        width: 100%;
        height: 200px;
    }

    .swiper-item {
        width: 100%;
        height: 100%;
        background: $custom-color-green;
    }

    .swiper-item:nth-child(2n) {
        background: $custom-color-red;
    }

    .swiper-y {
        width: 100%;
        height: 200px;
        margin-top: 10px;
    }
</style>